<style include="cr-icons realbox-dropdown-shared-style">
  :host {
    user-select: none;
  }

  #content {
    background-color: var(--color-realbox-results-background);
    border-radius: calc(0.25 * var(--cr-realbox-height));
    box-shadow: var(--cr-realbox-shadow);
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    overflow: hidden;
    padding-bottom: 8px;
    padding-top: var(--cr-realbox-height);
  }

  :host([round-corners]) #content {
    border-radius: calc(0.5 * var(--cr-realbox-height));
    padding-bottom: 18px;
  }

  @media (forced-colors: active) {
    #content {
      border: 1px solid ActiveBorder;
    }
  }

  .matches {
    display: contents;
  }

  cr-realbox-match {
    color: var(--color-realbox-results-foreground);
  }

  .header {
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    font-size: inherit;
    font-weight: inherit;
    /* To mirror match typical row height of items in vertical list. */
    height: 44px;
    margin-block-end: 0;
    margin-block-start: 0;
    outline: none;
    padding-bottom: 6px;
    padding-inline-end: 16px;
    padding-inline-start: 12px;
    padding-top: 6px;
  }

  .header .text {
    color: var(--color-realbox-results-foreground-dimmed);
    font-size: .875em;
    font-weight: 500;
    overflow: hidden;
    padding-inline-end: 6px;
    padding-inline-start: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header:focus-within:not(:focus) cr-icon-button {
      --cr-icon-button-fill-color:
          var(--color-realbox-results-icon-selected);
  }

  cr-realbox-match:-webkit-any(:hover, :focus-within, [selected]) {
    background-color:
        var(--color-realbox-results-background-hovered);
  }

  @media (forced-colors: active) {
    cr-realbox-match:-webkit-any(:hover, :focus-within, [selected]) {
      background-color: Highlight;
    }
  }

  .primary-side {
    flex: 1;
    min-width: 0;
  }

  .secondary-side {
    display: var(--cr-realbox-secondary-side-display, none);
    min-width: 0;
    padding-block-end: 8px;
    padding-inline-end: 16px;
    width: 314px;
  }

  .secondary-side .header {
    padding-inline-end: 0;
    padding-inline-start: 0;
  }

  .secondary-side .matches {
    display: flex;
    gap: 4px;
  }
</style>
<div id="content">
  <template is="dom-repeat"
      items="[[sideTypes_(showSecondarySide_)]]"
      as="side">
    <div class$="[[classForSide_(side)]]">
      <template is="dom-repeat" items="[[groupIdsForSide_(side, result.matches.*)]]"
          as="groupId">
        <template is="dom-if" if="[[hasHeaderForGroup_(groupId)]]">
          <!-- Header cannot be tabbed into but gets focus when clicked. This stops
              the dropdown from losing focus and closing as a result. -->
          <h3 class="header" data-id$="[[groupId]]" tabindex="-1"
              on-focusin="onHeaderFocusin_" on-click="onHeaderClick_"
              aria-hidden="true">
            <span class="text">[[headerForGroup_(groupId)]]</span>
            <cr-icon-button class$="action-icon [[toggleButtonIconForGroup_(groupId, hiddenGroupIds_.*)]]"
                title="[[toggleButtonTitleForGroup_(groupId, hiddenGroupIds_.*)]]"
                aria-label$="[[toggleButtonA11yLabelForGroup_(groupId, hiddenGroupIds_.*)]]"
                on-mousedown="onToggleButtonMouseDown_">
            </cr-icon-button>
          </h3>
        </template>
        <div class="matches">
          <template is="dom-repeat"
              items="[[matchesForGroup_(groupId, result.matches.*, hiddenGroupIds_.*)]]"
              as="match" on-dom-change="onResultRepaint_">
            <cr-realbox-match tabindex="0" role="option" match="[[match]]"
                match-index="[[matchIndex_(match)]]" side-type="[[side]]"
                selected$="[[isSelected_(match, selectedMatchIndex)]]">
            </cr-realbox-match>
          </template>
        </div>
      </template>
    </div>
  </template>
</div>
